<template>
    <div>
        <keep-alive>
            <!--router-view组件是一个 functional 组件，渲染路径匹配到的视图组件-->
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="18">
                    <h2>字段编辑</h2>
                    <span style="color: red">{{warningText}}</span>
                </el-col>
                <el-col :span="6" style="padding: 15px">
                    <el-button type="success" size="mini" @click="addRow">新增行</el-button>
                    <el-button type="success" size="mini" @click="submitInfo">保存</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <div v-for="(item, index) in fieldList" :key="item.id" class="field-list">
                <el-row :gutter="20">
                    <el-col :span="1" class="list-cust-item">
                        {{index +1 }}
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="item.fieldName" placeholder="请输入字段描述"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="item.fieldDbName" placeholder="请输入字典名"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="item.fieldType" placeholder="请选择字段类型">
                            <el-option
                            v-for="option in fieldTypeOptions"
                            :key="option.value"
                            :label="option.label"
                            :value="option.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2">
                        <el-input v-model="item.fieldLength" type="number" placeholder="字段长度"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-input v-model="item.decimalLength" type="number" placeholder="小数点位数"></el-input>
                    </el-col>
                    <el-col :span="2" class="list-cust-item">
                        <el-button type="danger" plain size="mini" @click="deleteRow(item.fieldId, index)">删除</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-main>
    </div>
</template>

<script>
/* eslint-disable */
    export default {
      name: 'fieldManage',
      data (){
          return {
              fieldList: [],
              formId: '',
              warningText: '',
              fieldTypeOptions: [{
                value: 'INT',
                label: '整数值(INT)'
                },
                {
                value: 'TINYINT',
                label: '小整数值(TINYINT)'
                }, 
                {
                value: 'VARCHAR',
                label: '变长字符串(VARCHAR)'
                }, 
                {
                value: 'DATETIME',
                label: '混合日期(DATETIME)'
                }, 
                {
                value: 'DECIMAL',
                label: '小数值(DECIMAL)'
                },
                {
                value: 'FLOAT',
                label: '单精度浮点数(FLOAT)'
                }, 
                {
                value: 'DOUBLE',
                label: '双精度浮点数(DOUBLE)'
                }, 
                {
                value: 'DATE',
                label: '日期值(DATE)'
                }, 
                {
                value: 'TIMESTAMP',
                label: '混合日期(TIMESTAMP)'
                }, 
                {
                value: 'CHAR',
                label: '定长字符串(CHAR)'
                }, 
                {
                value: 'TEXT',
                label: '长文本数据(TEXT)'
                }, 
                {
                value: 'BLOB',
                label: '二进制长文本(BLOB)'
                }]
          }
      },
      created () {
        this.init()
      },
      activated () {
        this.init()
      },
      methods: {
        init (){
            // let id = this.$route.query.id
            let formId = this.$route.query.formId
            console.log("formId:", formId)
            if (formId !== null && formId !== undefined && formId!== '') {
                this.formId = formId
                this.getFieldList()
            } else {
                this.warningText = '表单基础信息未保存，请先保存后重新打开该页面'
                this.$message.error(this.warningText); 
            }
        },
        addRow (){
           let row = {
               fieldId: '',
               fieldName: '',
               fieldDbName: '',
               fieldType: '',
               fieldLength: '',
               decimalLength: ''
           }
           this.fieldList = this.fieldList.concat(row)
        },
        deleteRow (fieldId, index){
            if (fieldId !== null && fieldId !== undefined && fieldId!== '') {
                this.$http({
                    url: this.$http.adornUrl('/form/deleteField'),
                    method: 'post',
                    params: this.$http.adornParams({
                        'fieldId': fieldId
                    })
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.getFieldList
                    }
                })
            } else {
                this.fieldList.splice(index,1)
            }
        },
        getFieldList (){
            if (this.formId !== '') {
               this.$http({
                url: this.$http.adornUrl('/form/getFieldList'),
                method: 'post',
                params: this.$http.adornParams({
                  'formId': this.formId
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.fieldList = data.data
                }
              })
            }
        },
        submitInfo (){
            let formId = this.$route.query.formId
            console.log("formId:", formId)
            if (formId !== null && formId !== undefined && formId!== '') {
                this.formId = formId
                this.getFieldList()
            } else {
                this.warningText = '表单基础信息未保存，请先保存后重新打开该页面'
                this.$message.error(this.warningText); 
            }

            if (this.formId !== '') {
               this.$http({
                url: this.$http.adornUrl('/form/saveFormFieldTradition'),
                method: 'post',
                params: this.$http.adornParams({
                  'formId': this.formId,
                  'fieldList': encodeURI(JSON.stringify(this.fieldList))
                })
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  this.getFieldList()
                }
              })
            } else {
               this.$message.error('表单基础信息未保存，请先保存后重新打开该页面'); 
            }
        }
      }
    }
</script>

<style scoped>
    .list-cust-item{
        padding: 10px 0px;
        text-align: center;
    }
    .field-list {
        border-bottom: 1px solid rgb(240, 240, 240);
        padding-top: 6px;
    }
    .el-header {
        background-color: #f0f0f0;
        border-bottom: 1px solid #f1f1f1;
    }
</style>
